<template>
    <div class="header wrap">
        <h1>
            <img src="../assets/img/indexLogo.6f8ac4f0.png" alt="">
        </h1>
        <div class="nav">
            <ul>
                <li @click="$router.push('/index')" :class="$route.path == '/index' ? 'active' : ''">首页</li>
                <li @click="$router.push('/goods')" :class="$route.path == '/goods' ? 'active' : ''">全部商品</li>
                <li @click="$router.push('/user')" :class="$route.path == '/user' ? 'active' : ''">个人中心</li>
                <li @click="$router.push('/order' )" :class="$route.path == '/order' ? 'active' : ''">我的订单</li>
                <li @click="$router.push('/free')" :class="$route.path == '/free' ? 'active' : ''">专属福利</li>
            </ul>
        </div>
        <div class="search">
            <input type="text">
            <span><img width="15" height="15" src="../assets/img/search.png" alt=""></span>
        </div>
    </div>
</template>


<script setup>
   let active = 'active';
</script>

<style lang="less" scoped>
.header {
    height: 118px;
    // background: #abcabc;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .nav ul { 
        display: flex;
        justify-content: space-between;
        width: 500px;
        li {
            cursor: pointer;
        }
        .active {
            font-weight: 700;
            color: #0A328E;
        }
    }

    .search {
        display: flex;
        input {
            width: 214px;
            height: 38px;
            border: 1px solid #DEDEDE;
            border-radius: 20px 0px 0px 20px;
            text-indent: 12px;
        }

        span {
            display: flex;
            width: 50px;
            height: 40px;
            background: #0A328E;
            border-radius: 0px 20px 20px 0px;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
    }



}


</style>